.codepen-wrapper[data-codepen-id="CoFfv"] * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

.codepen-wrapper[data-codepen-id="CoFfv"] body {
background: #e9e5e2;
padding: 40px 0;
text-align: center;
}

.codepen-wrapper[data-codepen-id="CoFfv"] #van {
overflow: hidden;
position: relative;
display: inline-block;
width: 242px;
height: 205px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van:after {
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: solid 2px #d8d3cf;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left,
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right {
top: 0;
bottom: 0;
width: 50%;
overflow: hidden;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left,
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left > *,
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right,
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right > * {
position: absolute;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left {
left: 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .ear-1 {
top: 11px;
left: 29px;
width: 37px;
height: 21px;
border-style: solid;
border-color: transparent transparent #957552 transparent;
border-width: 0 0 21px 37px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .ear-2 {
top: 36px;
left: 0px;
width: 45px;
height: 69px;
border-style: solid;
border-color: transparent transparent #957552 transparent;
border-width: 0 0 69px 26px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .ear-3 {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 10px;
left: 62px;
width: 14px;
height: 14px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .ear-4 {
-moz-border-radius: 50% 0 0 50%;
-webkit-border-radius: 50%;
border-radius: 50% 0 0 50%;
top: 31px;
left: 26px;
width: 20px;
height: 10px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .ear-5 {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 100px;
left: 0;
width: 14px;
height: 14px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .antenna {
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px;
border-radius: 10px 0 0 0;
top: 0;
right: 0;
width: 10px;
height: 31px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .roof {
-moz-border-radius-topleft: 90px 30px;
-webkit-border-top-left-radius: 90px 30px;
border-top-left-radius: 90px 30px;
top: 13px;
left: 43px;
width: 78px;
height: 23px;
background: #c69c6d;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .window-border {
top: 34px;
left: 28px;
width: 93px;
height: 49px;
border-style: solid;
border-color: transparent transparent #c69c6d transparent;
border-width: 0 0 49px 15px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .window {
top: 44px;
left: 35px;
width: 86px;
height: 39px;
border-style: solid;
border-color: transparent transparent #f6efe8 transparent;
border-width: 0 0 39px 12px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .window-shade {
top: 44px;
left: 44px;
width: 77px;
height: 9px;
border-style: solid;
border-color: transparent transparent #e4cfbb transparent;
border-width: 0 0 9px 3px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .window-border-top {
-moz-border-radius-bottomleft: 40px 80px;
-webkit-border-bottom-left-radius: 40px 80px;
border-bottom-left-radius: 40px 80px;
top: 34px;
left: 113px;
width: 8px;
height: 15px;
background: #c69c6d;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .window-border-bottom {
-moz-border-radius-topleft: 30px 80px;
-webkit-border-top-left-radius: 30px 80px;
border-top-left-radius: 30px 80px;
top: 72px;
left: 105px;
width: 16px;
height: 45px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .hood {
top: 83px;
left: 11px;
width: 110px;
height: 19px;
border-style: solid;
border-color: transparent transparent #d1b08a transparent;
border-width: 0 0 19px 17px;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .tongue {
-moz-border-radius-bottomleft: 40px 80px;
-webkit-border-bottom-left-radius: 40px 80px;
border-bottom-left-radius: 40px 80px;
top: 157px;
left: 103px;
width: 20px;
height: 35px;
background: #c1272d;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .tongue-inner {
-moz-border-radius-bottomleft: 30px 80px;
-webkit-border-bottom-left-radius: 30px 80px;
border-bottom-left-radius: 30px 80px;
top: 152px;
left: 111px;
width: 10px;
height: 25px;
background: #911d22;
z-index: 20;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .front {
-moz-border-radius: 22px 0 12px 12px;
-webkit-border-radius: 22px;
border-radius: 22px 0 12px 12px;
top: 95px;
left: 5px;
width: 116px;
height: 74px;
background: #c69c6d;
z-index: 30;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .freckles {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552;
-webkit-box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552;
box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552;
top: 123px;
left: 30px;
width: 7px;
height: 7px;
background: #957552;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .light {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 2px 0 0 #d1b08a;
-webkit-box-shadow: 0 2px 0 0 #d1b08a;
box-shadow: 0 2px 0 0 #d1b08a;
top: 120px;
left: 59px;
width: 30px;
height: 30px;
background: #ffffff;
border: solid 7px #ba9266;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .nose {
-moz-box-shadow: 0 -4px 0 0 #333333;
-webkit-box-shadow: 0 -4px 0 0 #333333;
box-shadow: 0 -4px 0 0 #333333;
-moz-border-radius-topleft: 11px 8px;
-webkit-border-top-left-radius: 11px 8px;
border-top-left-radius: 11px 8px;
-moz-border-radius-bottomleft: 33px 92px;
-webkit-border-bottom-left-radius: 33px 92px;
border-bottom-left-radius: 33px 92px;
top: 99px;
left: 91px;
width: 30px;
height: 43px;
background: #000000;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .nose:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: inset 0 -2px 0 0 #5c5c5c;
-webkit-box-shadow: inset 0 -2px 0 0 #5c5c5c;
box-shadow: inset 0 -2px 0 0 #5c5c5c;
content: " ";
position: absolute;
display: block;
top: 12px;
left: 13px;
width: 12px;
height: 12px;
background: #333333;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .bumper {
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0;
border-radius: 0 0 0 10px;
top: 169px;
left: 17px;
width: 104px;
height: 18px;
background: #957552;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .left .tire {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0;
border-radius: 0 0 5px 5px;
top: 169px;
left: 17px;
width: 25px;
height: 36px;
background: #000000;
z-index: 1;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right {
right: 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .ear-1 {
top: 11px;
right: 29px;
width: 37px;
height: 21px;
border-style: solid;
border-color: transparent transparent #86694a transparent;
border-width: 0 37px 21px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .ear-2 {
top: 36px;
right: 0px;
width: 45px;
height: 69px;
border-style: solid;
border-color: transparent transparent #86694a transparent;
border-width: 0 26px 69px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .ear-3 {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 10px;
right: 62px;
width: 14px;
height: 14px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .ear-4 {
-moz-border-radius: 50% 50% 0 0;
-webkit-border-radius: 50%;
border-radius: 50% 50% 0 0;
top: 31px;
right: 26px;
width: 22px;
height: 10px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .ear-5 {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 100px;
right: 0;
width: 14px;
height: 14px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .antenna {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0;
border-radius: 0 10px 0 0;
top: 0;
left: 0;
width: 10px;
height: 31px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .roof {
-moz-border-radius-topright: 90px 30px;
-webkit-border-top-right-radius: 90px 30px;
border-top-right-radius: 90px 30px;
top: 13px;
right: 43px;
width: 78px;
height: 23px;
background: #ad895f;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .window-border {
top: 34px;
right: 28px;
width: 93px;
height: 49px;
border-style: solid;
border-color: transparent transparent #ad895f transparent;
border-width: 0 15px 49px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .window {
top: 44px;
right: 35px;
width: 86px;
height: 39px;
border-style: solid;
border-color: transparent transparent #d4cbc2 transparent;
border-width: 0 12px 39px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .window-shade {
top: 44px;
right: 44px;
width: 77px;
height: 9px;
border-style: solid;
border-color: transparent transparent #c5b19e transparent;
border-width: 0 3px 9px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .window-border-top {
-moz-border-radius-bottomright: 40px 80px;
-webkit-border-bottom-right-radius: 40px 80px;
border-bottom-right-radius: 40px 80px;
top: 34px;
right: 113px;
width: 8px;
height: 15px;
background: #ad895f;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .window-border-bottom {
-moz-border-radius-topright: 30px 80px;
-webkit-border-top-right-radius: 30px 80px;
border-top-right-radius: 30px 80px;
top: 72px;
right: 105px;
width: 16px;
height: 45px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .hood {
top: 83px;
right: 11px;
width: 110px;
height: 19px;
border-style: solid;
border-color: transparent transparent #b69977 transparent;
border-width: 0 17px 19px 0;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .tongue {
-moz-border-radius-bottomright: 40px 80px;
-webkit-border-bottom-right-radius: 40px 80px;
border-bottom-right-radius: 40px 80px;
top: 157px;
right: 103px;
width: 20px;
height: 35px;
background: #a92b2c;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .tongue-inner {
-moz-border-radius-bottomright: 30px 80px;
-webkit-border-bottom-right-radius: 30px 80px;
border-bottom-right-radius: 30px 80px;
top: 152px;
right: 111px;
width: 10px;
height: 25px;
background: #832323;
z-index: 20;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .front {
-moz-border-radius: 0 22px 12px 12px;
-webkit-border-radius: 0;
border-radius: 0 22px 12px 12px;
top: 95px;
right: 5px;
width: 116px;
height: 74px;
background: #ad895f;
z-index: 30;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .freckles {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a;
-webkit-box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a;
box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a;
top: 123px;
right: 30px;
width: 7px;
height: 7px;
background: #86694a;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .light {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 2px 0 0 #b69977;
-webkit-box-shadow: 0 2px 0 0 #b69977;
box-shadow: 0 2px 0 0 #b69977;
top: 120px;
right: 59px;
width: 30px;
height: 30px;
background: #ffffff;
border: solid 7px #a4815a;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .nose {
-moz-box-shadow: 0 -4px 0 0 #383531;
-webkit-box-shadow: 0 -4px 0 0 #383531;
box-shadow: 0 -4px 0 0 #383531;
-moz-border-radius-topright: 11px 8px;
-webkit-border-top-right-radius: 11px 8px;
border-top-right-radius: 11px 8px;
-moz-border-radius-bottomright: 33px 92px;
-webkit-border-bottom-right-radius: 33px 92px;
border-bottom-right-radius: 33px 92px;
top: 99px;
right: 91px;
width: 30px;
height: 43px;
background: #0f0c08;
z-index: 40;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .nose:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: inset 0 -2px 0 0 #595552;
-webkit-box-shadow: inset 0 -2px 0 0 #595552;
box-shadow: inset 0 -2px 0 0 #595552;
content: " ";
position: absolute;
display: block;
top: 12px;
right: 13px;
width: 12px;
height: 12px;
background: #383531;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .bumper {
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0;
border-radius: 0 0 10px 0;
top: 169px;
right: 17px;
width: 104px;
height: 18px;
background: #86694a;
}
.codepen-wrapper[data-codepen-id="CoFfv"] #van .right .tire {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0;
border-radius: 0 0 5px 5px;
top: 169px;
right: 17px;
width: 25px;
height: 36px;
background: #000000;
z-index: 1;
}